

<template>
<div class="theBigBox">
  <span>{{flag}}</span>
  <br>
  <br>
  <el-form ref="form" :model="form"  label-width="130px">
    <el-form-item label="优惠券名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入优惠券名称" />
    </el-form-item>
    <el-form-item label="优惠券面值" prop="price">
      <el-input v-model="form.price" placeholder="请输入优惠券面值" />
    </el-form-item>

    <el-form-item label="发送方式" prop="pointsType">
      <el-radio v-model="form.sendType"  :label=1>用户领取</el-radio>
      <el-radio v-model="form.sendType" :label=2>新用户自动发放</el-radio>
      <el-radio v-model="form.sendType" :label=3>系统赠送</el-radio>
      <el-radio v-model="form.sendType" :label=4>付费会员专享</el-radio>
      <br>

        <p class="p0">用户领取：用户需要手动领取优惠券；</p> <br>
        <p class="p1">新用户自动发放：新注册的用户自动发放；</p>
        <p class="p1">系统赠送：后台发放指定用户或者添加到商品里面用户购买该商品获得；</p>
        <p class="p1">付费会员专享：仅付费会员可以领取和使用</p>
    </el-form-item>



    <el-form-item label="优惠券类型"  prop="pointsType">
      <el-radio v-model="form.pointsType" :label="1">通用券</el-radio>
      <el-radio v-model="form.pointsType" :label="2">品类券</el-radio>
      <el-radio v-model="form.pointsType" :label="3">商品券</el-radio>

    </el-form-item>
<!--    品类下拉框-->
    <div v-if="form.pointsType===2" class="div1">
      <el-cascader
        v-model="proIcBoxOnclickSelect"
        :props="{ checkStrictly: true , multiple:true, value:'id' , label:'name'}"
        :options="checkItem"
        :expand-change="showPointsTypeChange()"
        clearable></el-cascader>
    </div>
<!--    商品券选择-->
    <div v-if="form.pointsType===3" class="div1">
      <div class="spq">
        <div class="imgbox" v-for="(imageUrl, index) in checkboxImg" :key="index">
        <img :src="imageUrl" alt="Image" style="width: 100px; height: 100px;" />
        </div>
        <div class="proIcBox" @click="proIcBoxOnclick()">
          <i  class="el-icon-shopping-bag-2 el-icon"> </i>
        </div>
      </div>

    </div>

<!--使用门槛-->
    <el-form-item label="使用门槛" prop="sillType">
      <el-radio v-model="form.sillType" :label="1">无门槛</el-radio>
      <el-radio v-model="form.sillType" :label="2">有门槛</el-radio>
    </el-form-item>
<!--使用门槛的隐藏-->
    <div v-if="form.sillType===2" class="div1">
      <el-input v-model="form.sillValue" class="mr"/>
    </div>
<!--    使用时间-->
    <el-form-item label="使用时间" prop="useType">
      <el-radio v-model="form.useType" :label="1">天数</el-radio>
      <el-radio v-model="form.useType" :label="2">指定时间段</el-radio>
    </el-form-item>
    <div v-if="form.useType===1" class="div1">
      <el-input v-model="form.useDayValue" class="mr"/>
    </div>
    <div v-if="form.useType===2" class="div1">
      <el-date-picker
        class="ms"
        v-model="useTimeSAndE"
        type="daterange"
        :change="showUseTimeSAndEChange()"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </div>




    <div v-if="form.sendType === 1||form.sendType===4">
      <!-- 要显示的组件内容 -->
      <!--    领取时间-->
      <el-form-item label="领取时间" :hidden="this.checkGetType" prop="getTimeType">
        <el-radio v-model="form.getTimeType" :label="1">限时</el-radio>
        <el-radio v-model="form.getTimeType" :label="2">不限时</el-radio>
      </el-form-item>
      <div v-if="form.getTimeType===1" class="div1">
        <el-date-picker
          class="ms"
          v-model="getTimeSAndE"
          type="daterange"
          :change="showGetTimeSAndEChange()"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>





      <!--    优惠券发布数量-->
      <el-form-item label="优惠券发布数量" prop="hasNumType">
        <el-radio v-model="form.hasNumType" :label="1">限量</el-radio>
        <el-radio v-model="form.hasNumType" :label="2">不限量</el-radio>
      </el-form-item>
      <div v-if="form.hasNumType===1" class="div1">
        <el-input v-model="form.hasNumValue"/>
      </div>


      <!--    用户领取数量-->
      <el-form-item label="用户领取数量" prop="canGetNum">
        <el-input v-model="form.canGetNum"/>
      </el-form-item>
    </div>
    <!--    状态-->
    <el-form-item label="状态" prop="status">
      <el-radio v-model="form.status" :label="1">开启</el-radio>
      <el-radio v-model="form.status" :label="2">关闭</el-radio>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button class="bn1" type="primary" @click="submitForm">立即创建</el-button>
  </div>








  <!-- 选择商品界面二级弹出框 -->
  <el-dialog title="选择商品" :visible.sync="openSecond" width="800px" append-to-body>
    <el-form ref="proForm" :model="proForm"  label-width="80px">
      <el-form-item label="商品分类" prop="typeId">
        <div class="block">
          <el-cascader
            :options="checkItem"
            :props="{ checkStrictly: true , value:'id' , label:'name'}"
            :value='checkItem.id'
            :label="checkItem.name"
            clearable></el-cascader>
        </div>
      </el-form-item>
      <el-form-item label="商品搜索" prop="name">
        <el-input :v-model="proForm.name"/>        </el-form-item>
    </el-form>


    <el-table
      :data="showItemList"
      height="250"
      border
      style="width: 100%">
      <el-table-column prop="pid" width="30">
        <template slot-scope="scope">
          <el-checkbox-group v-model="checkboxId" @change="showCheckBoxChange(scope.row.carousel)">
            <el-checkbox :label="scope.row.id"></el-checkbox>
          </el-checkbox-group>
        </template>
      </el-table-column>
      <el-table-column
        prop="id"
        label="商品id"
        width="180">
      </el-table-column>
      <el-table-column label="图片" align="center" prop="carousel" width="199">
        <template slot-scope="scope">
          <image-preview :src="scope.row.carousel" :width="50" :height="50"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="shopName"
        label="商品名称"
        width="380">
      </el-table-column>
    </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitPro">提 交</el-button>
          </div>
    <pagination
      v-show="prototal>0"
      :total="prototal"
      :page.sync="showItemList.pageNum"
      :limit.sync="showItemList.pageSize"
      @pagination="findAllItem"
    />
  </el-dialog>
</div>
</template>

<script>
import {addItem, getGetType, getItem, updateItem} from "@/api/points/item";
import {hidden} from "chalk";
import {listPro} from "@/api/system/pro";
import {listItem} from "@/api/product/pro";

export default {
  created() {
    this.getItem();
    this.findAllItem();
    // 如果路由参数存在
    if (this.$route.query.id) {
      this.flag='更新';
      if(this.$route.query.copy){
        this.flag='复制'
      }
      const id = this.$route.query.id; // 获取路由参数中的id值
      console.log(this.$route.query.id, "id");
      getItem(id).then(response => {
        this.form = response.data;
        console.log(this.form, "areaObj-------------");
        this.useTimeSAndE.push(this.form.useTimeStart,this.form.useTimeEnd)
        this.getTimeSAndE.push(this.form.getTimeStart,this.form.getTimeEnd)
        // 在这里执行需要在异步操作完成后执行的代码
          if(this.form.pointsType===2){
            this.proIcBoxOnclickSelect=this.form.pointsValueList;
          }
          if(this.form.pointsType===3){
            this.checkboxImg=this.form.pointsValueList;
          }
      });
    }else {
      this.flag='添加';
    }



  },
  data() {
    return {
      flag:'',
      // 下拉框的数组
      proIcBoxOnclickSelect:[],
      // 商品多选的id的数组
      checkboxId:[],
      // 装img的数组
      checkboxImg:[],
      // 商品弹出框表单隐藏与否
      openSecond:false,
      // 商品弹出框表单的form对象
      proForm:{},
      prototal:0,
      showItemList:[],
      checkItem:[],
      // 使用时间是否限时
      useTimeSAndE:[],
      // 领取时间
      getTimeSAndE:[],
      checkGetType:false,
      pointsTypeOptions:[],
      areaObj:[],
      title:'',
      form: {}
    }
  },
  methods: {
    submitPro(){
      // let str = '';
      // for (let i=0;i<this.checkboxId.length;i++){
      //   str+=this.checkboxId[i].id+",";
      // }
      // this.form.pointsValue=str;
      this.form.pointsValueList=this.checkboxImg;

      this.openSecond=false;
      this.proForm={};

    },
    showCheckBoxChange(img){
      this.checkboxImg.push(img);
    },
    // checkPro(row){
    //   this.formId.id=row.id;
    //   this.formId.img=row.carousel;
    //   this.openSecond=false;
    //   if(this.formId!=null){
    //     this.hideGuige=false;
    //   }
    // },
    // 商品添加界面
    findAllItem(){
      listItem(this.proForm).then(response => {
        this.prototal=response.total;
        this.showItemList=response.rows;
      })
    },
    proIcBoxOnclick(){
      this.checkboxImg=[];
      this.checkboxId=[];
      this.openSecond=true;
    },
    // 品类下拉框查询
    showPointsTypeChange(){
      // console.log(this.proIcBoxOnclickSelect,"this.proIcBoxOnclickSelect")
      // let selectStr='';
      // for (let i = 0; i < this.proIcBoxOnclickSelect.length; i++) {
      //     selectStr+=this.proIcBoxOnclickSelect[i]+",";
      // }
      // console.log(selectStr+"selectStr")
      this.form.pointsValueList=this.proIcBoxOnclickSelect;
    },
    getItem(){
      listPro().then(response => {
        this.checkItem=response.rows;
      })
    },
    showUseTimeSAndEChange(){
      this.form.useTimeStart=this.useTimeSAndE[0];
      this.form.useTimeEnd=this.useTimeSAndE[1];
    },
    showGetTimeSAndEChange(){
      this.form.getTimeStart=this.getTimeSAndE[0];
      this.form.getTimeEnd=this.getTimeSAndE[1];
    },
    sendTypeClick(){
      this.checkGetType=true;
    },
    submitForm() {
      if(this.flag==='添加'){
        addItem(this.form).then(response => {
          this.$message({
            message: '添加成功',
            type: 'success',

          });
          this.$router.push({
            path:'/points/item',
          })
        })
      }else if(this.flag==='更新'){
          updateItem(this.form).then(response => {
            this.$message({
              message: '修改成功',
              type: 'success',
            });
            this.$router.push({
              path:'/points/item',
            })
          })
        }else if(this.flag==='复制'){
          addItem(this.form).then(response => {
            this.$message({
              message: '复制成功',
              type: 'success',

            });
            this.$router.push({
              path:'/points/item',
            })
          })
      }
      }
    },
    cancel(){

    },
}
</script>

<style scoped lang="scss">
.spq{
  width: 1000px;
  height: 80px;
  display: flex; /* 使用Flexbox布局 */
  flex-wrap: nowrap; /* 不换行，横向展示 */
  margin-top: -20px;
}
.el-icon{
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  font-size: 24px;
  margin-left: 18px;
}
.proIcBox{
  margin-top: 20px;
  margin-left: 28px;
  width: 58px;
  height: 58px;
  line-height: 58px;
  border: 1px dotted rgba(0, 0, 0, .1);
  border-radius: 4px;
  background: rgba(0, 0, 0, .02);
}

.p0{
  font-size: 8px;
  margin-bottom: -25px;
}
.p1{
  font-size: 8px;
  margin-top: -25px;
}
.theBigBox{
  margin-top: 50px;
  margin-left: 80px;
}
.el-input{
  width: 380px;
}
.bn1{
  margin-left: 100px;
}


.div1{
  margin-left: 125px;
  margin-bottom: 20px;
}

</style>
